import React from 'react';
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import UserInfo from '../components/profile/UserInfo';
import WalletCard from '../components/profile/WalletCard';
import OrderList from '../components/profile/OrderList';
import ActionButtons from '../components/profile/ActionButtons';

const mockOrders = [
  { id: '1', status: '已完成' as const },
  { id: '2', status: '已支付' as const },
  { id: '3', status: '待支付' as const },
];

const ProfilePage: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>我的</IonTitle>
        </IonToolbar>
      </IonHeader>
      
      <IonContent>
        <div className="ion-padding">
          <UserInfo username="AAA" accountId="AA123" />
          <WalletCard balance={0} />
          <OrderList orders={mockOrders} />
          <ActionButtons />
        </div>
      </IonContent>
    </IonPage>
  );
};

export default ProfilePage;